<template>
	<view>
		<ker-top-roll-tabs ref="topTabs" :tabList="lists" :current="current" :more="true" @changeCurrent="changeCurrent"></ker-top-roll-tabs>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration" :current="current" @change="swiPerMsg">
			<swiper-item v-for="(item, index) in lists" :key="'tab' + index">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="upllBottom">
					<block v-for="(graphic,graphicIndex) in graphicLists" :key="graphicIndex" >
						<kerGraphicList :itemClass="graphic.class" :text="graphic.text" :img="graphic.img"></kerGraphicList>
					</block>
					<view class="load-more" v-show="isBottom">加载更多...</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import kerTopRollTabs from '../../components/ker-top-roll-tabs/ker-top-roll-tabs.vue';
import kerGraphicList from '../../components/ker-graphic-list/ker-graphic-list.vue';
export default {
	components: {
		kerTopRollTabs,
		kerGraphicList
	},
	data() {
		return {
			lists: ['选项卡1', '选项卡2', '选项卡3', '选项卡4', '选项卡5', '选项卡6', '选项卡7', '选项卡8', '选项卡9'],
			indicatorDots: false,
			autoplay: false,
			duration: 500,
			isBottom: false,
			current:0,
			classType:['','item_left_text','item_left_img','bottom_img_3'],
			graphicLists:[
				{
					class:'',
					text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
					img:['https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg']
				},
				{
					class:'item_left_text',
					text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
					img:['https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20191212%2F2346a94b0156406aa20f3a03f2011eef.jpg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629860222&t=82dc577ede24c127d32ce4de7eee2f16']
				},
				{
					class:'item_left_img',
					text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
					img:['https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg']
				},
				{
					class:'',
					text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
					img:['https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20191212%2F2346a94b0156406aa20f3a03f2011eef.jpg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629860222&t=82dc577ede24c127d32ce4de7eee2f16']
				},
				{
					class:'item_left_img',
					text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
					img:['https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg']
				},
				{
					class:'bottom_img_3',
					text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
					img:['https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg']
				}
			]
		};
	},
	methods: {
		changeCurrent(index){
			this.current = index
		},
		swiPerMsg(e) {
			console.log('swiPerMsg:',e);
			this.current = e.detail.current;
			this.$refs.topTabs.changTabItem(this.current)
		},
		upllBottom() {
			this.isBottom = true;
			setTimeout(() => {
				this.isBottom = false;
				this.addList()
			},2000)
			console.log('到底底部');
		},
		addList(){
			let index = Math.floor(Math.random() * (5 - 1)) + 1
			console.log(index)
			let item = {
				class:this.classType[index-1],
				text:'uni-app 支持原生小程序自定义组件，更开放、更自由',
				img:['https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20191212%2F2346a94b0156406aa20f3a03f2011eef.jpg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629860222&t=82dc577ede24c127d32ce4de7eee2f16']
			}
			if(index == 4){
				item.img = ['https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3005622592,2499628016&fm=26&fmt=auto&gp=0.jpg']
			}
			this.graphicLists.push(item)
		}
	},
	mounted() {}
};
</script>
<style lang="scss" scoped>
	
	.swiper{
		position: fixed;
		height: auto;
		top: 86px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #F1F1F1
	}
	.load-more{
		height: 35px;
		background-color: #FFF;
		color: #CCCCCC;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #F1F1F1;
	}
</style>
